
import React, { memo } from "react";

import cs from 'classnames';
import sty from './sty.module.css';
import { changeIsShow } from '@/components/theme-login/store/actionCreator';
import { useDispatch, useSelector } from "react-redux";
import { shallowEqual } from "react-redux";
const UseLogin = () => {
  const
    dispatch = useDispatch();
  const { isLogin } = useSelector(state => ({
    isLogin: state.getIn(['loginState', 'isLogin'])
  }), shallowEqual)
  const handleChangeShow = () => {
    if (!isLogin) {
      dispatch(changeIsShow(true))
    }
  }

  return <div className={sty.root} style={{ display: isLogin ? 'none' : 'block' }}>
    <div className={cs(sty.info, 'sprite_02')}>
      <p className={sty.detail}> 登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
      </p>
      <button className={cs(sty.btn, 'sprite_02')} onClick={handleChangeShow}>用户登陆</button>
    </div>
  </div>
}
export default memo(UseLogin)